<template>
  <div id="userInfo" class="set content">
    <!-- 页面标题 -->
    <div class="tilte-bar">我的信息</div>
    <!-- 基本信息 -->
    <div class="weui-info-wrap">
        <!-- <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>头像</p>
            </div>
            <div class="weui-cell__ft"><img src="@/assets/avatar.jpg" alt="头像" class="avatar-size"></div>
        </div> -->
        <!-- 委托单位 -->
        <template v-if="userTypeTag">
          <div class="weui-cell">
              <div class="weui-cell__bd">
                  <p>公司名称</p>
              </div>
              <div class="weui-cell__ft">{{userInfoList.user_name}}</div>
          </div>
          <div class="weui-cell">
              <div class="weui-cell__bd">
                  <p>联系人</p>
              </div>
              <div class="weui-cell__ft">{{userInfoList.contact_people}}</div>
          </div>
        </template>
        <!-- 个人用户 -->
        <template v-else>
          <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>姓名</p>
            </div>
            <div class="weui-cell__ft">{{userInfoList.user_name}}</div>
          </div>
        </template>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>手机号</p>
            </div>
            <div class="weui-cell__ft">{{userInfoList.phone_num}}</div>
        </div>
    </div>
    <!-- 更换账号按钮 -->
    <div>
      <div v-if="warningTag" class="button-warnning">解绑失败</div>
      <span class="weui-btn weui-btn_warn margin-1" @click="changeAccount">更换账号</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'userInfo',
  data () {
    return {
      userInfoList: {},
      userTypeTag: false,
      warningTag: false
    }
  },
  mounted() {
    this.getUserInfo();
    this.warningTag = false;
  },
  methods: {
    changeAccount: function() {
      let _self = this;
      _self.$http({
        method: 'post',
        url: 'untieBinding',
        data: {
          userId: localStorage.userId
        }
      }).then( response => {
        if(response.data.code === 0) {
          //解绑成功
          window.location.href = "./#/login";
          localStorage.userId = '';
        } else {
          _self.warningTag = true;
        }
      })
      
    },
    // 调用获取用户基本信息的接口
    getUserInfo: function() {
      var _self = this;
      _self.userTypeTag = false;
      _self.$http({
        method: 'post',
        url: 'personalInfo',
        data: {
          openId: localStorage.userOpenId
        }
      }).then( response => {
        // TODO:检查data是否取值成功
        console.log(response)
        _self.userInfoList = response.data.data;
        if(Object.keys(_self.userInfoList).length === 3) {
          // 为公司用户
          _self.userTypeTag = true;
        }
      })
    }
  }
}
</script>

<style scoped>
  /* 清空样式 */
  * {
    box-sizing: border-box;
  }
  button {
    border: 0;
    padding: 0;
    outline: none;
  }
  .set {
    background-color: #ededed;
    height: 100vh;
    background-size: 100% 100%;
    z-index: -10;
  }
  .weui-info-wrap {
    background-color: white;
    padding: 0 .5rem;
  }
  .avater {
    display: inline-block;
    position: fixed;
    top: 30%;
    left: 50%;
    margin-left: -7rem;
    text-align: center;
    color: white;
    font-size: 1rem;
    width: 14rem;
  }
  .avatar-size {
    display: inline-block;
    width: 3.5rem;
    /* border-radius: 5rem; */
  }
  .menu-list {
    margin: 0 .5rem;
    padding: .8rem .5rem;
  }
  .menu-list-middle {
    border-bottom: .05rem solid #506397;
    border-top: .05rem solid #506397;
    padding: .8rem .5rem;
  }
  .menu-list img{
    border: 0;
    width: 1rem;
    vertical-align: middle;
    display: inline-block;
    margin-right: .4rem;
  }
  .img-width {
    border: 0;
    width: 1rem;
    vertical-align: top;
    display: inline-block;
    margin-left: .4rem;
  }
  .name-wrap {
    display: inline-block;
    margin-top: .5rem;
    margin-bottom: 2rem;
  }
  .info-wrap {
    margin: .5rem;
    text-align: center;
  }
  .info-gap {
    margin-right: 1rem;
  }
  .margin-1 {
    margin: 1rem;
  }
</style>
      